<template>
	<div class="hot">
		<div class="hot-top">
			<div class="hot-left">
				<img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="">
				<span>本周热门榜单</span>
			</div>
			<div class="hot-right">
				<span>全部榜单</span>
				<span class="iconfont iconarrow-right-copy-copy"></span>
			</div>
		</div>
		<ul class="hotlist">
			<li v-for="(item,index) in hotlist" :key="index">
				<router-link to="/particulars">
					<div class="imglist">
						<img :src="item.imgurl" alt="item.name">
					</div>
					<p>{{ item.name }}</p>
					<p>
						<span>￥{{ item.price }}</span>起
					</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>
<script>
	export default{
		props:["hotlist"],
		data(){
			return{
				
			}
		}
	}
</script>
<style scoped lang="stylus">
@import "~@/assets/css/common.styl"
	.hotlist li:nth-child(1):before{
		$hottop("http://img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png");
	}
	/*.hotlist li:nth-child(2):before{
		$hottop('http://img1.qunarzz.com/piao/fusion/1710/2d/36d0c4adaebbbc02.png');
	}
	.hotlist li:nth-child(3):before{
		$hottop('http://img1.qunarzz.com/piao/fusion/1710/67/edc47ffef9e96b02.png');
	}*/
	.hotlist{
		overflow-x:scroll;
		white-space: nowrap;
	    margin-left: .2rem;
		position: relative;
	}
	.hotlist li{
		display: inline-block;
		margin-top: .12rem;
	    color: #212121;
	    font-size: .24rem;
	    line-height: .32rem;
	    text-align: center;
	    margin-right: .1rem;
		width: 2rem;
	}
	.hotlist p{
		margin-top: .08rem;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap
	}
	.hotlist span{
	    color: #ff8300;
	    font-size: .28rem;
	}
	.imglist img{
		width: 2rem;
	}
	.imglist{
		overflow: hidden;
	    width: 2rem;
	    height: 0;
	    padding-bottom: 2rem;
	}
	.hot{
		background-color: #fff;
		margin-top: .2rem;
	}
	.hot-top{
		overflow: hidden;
		padding:.2rem;
	}
	.hot-left{
		float:left;
		color: #212121;
    	font-size: .32rem;
	}
	.hot-left img{
		width: .3rem;
    	height: .3rem;
	}
	.hot-right{
		float:right;
		font-size: .24rem;
   		color: #616161;
	}
</style>